<template>
  <h2>GraphRelation2 关系图组件</h2>

  <h3>基本用法</h3>
  <!-- prettier-ignore -->
  <code-demo>
    <graph-relation2
      style="width: 100%; height: 500px"
      showToolbar
      backgroundColor="#fbfbfb"
      :mouseZoomable="false"
      :data="data"
      :waterMarker="waterMarker"
      @clickNode="clickNode"
      @clickToolbar="clickToolbar"
    ></graph-relation2>

    <template #code>
      {{ `
<template>
  <graph-relation2
    style="width: 100%; height: 500px"
    showToolbar
    backgroundColor="#fbfbfb"
    :mouseZoomable="false"
    :data="data"
    :waterMarker="waterMarker"
    @clickNode="clickNode"
    @clickToolbar="clickToolbar"
  ></graph-relation2>
</template>

<script>
const waterMarker = {
  url: '/健身房.png',
  width: 187,
  height: 137,
}

function clickNode(model) {
  console.info('clickNode', model)
}

function clickToolbar(status) {
  console.info('clickToolbar', status)
}

const data = {
  text: '杭州仟金顶信息技术有限公司',
  type: 'root-node',
  children: [
    {
      text: '股东1',
      type: 'relation-node',
      mainColor: 'green',
      arrow: 'in',
      children: [
        {
          text: '王某1',
          type: 'entity-node',
          mainColor: 'green',
          hasPoint: true,
          subText: '[40%]',
          logoType: 'person',
          tags: [
            {
              text: '失信被执行人',
              riskType: 'bad',
            },
            {
              text: '法律诉讼',
              riskType: 'bad',
            },
            {
              text: '股东',
              riskType: 'good',
            },
            {
              text: '对外投资',
              riskType: 'good',
            },
          ],
          descriptions: [{ label: '股权占比', value: '40%' }],
          children: [
            {
              text: '对外投资1',
              type: 'relation-node',
              mainColor: 'orange',
              arrow: 'in',
            },
          ],
        },
        {
          text: '黄某',
          type: 'entity-node',
          mainColor: 'green',
          hasPoint: true,
          subText: '[40%]',
          children: [
            {
              text: '对外投资2',
              type: 'relation-node',
              mainColor: 'orange',
              arrow: 'out',
            },
          ],
        },
        {
          text: '展开',
          type: 'more-node',
          subText: '[1]',
          hiddenChildren: [
            {
              text: '李某',
              type: 'entity-node',
              mainColor: 'green',
              hasPoint: true,
              subText: '[40%]',
            },
          ],
        },
      ],
    },
    {
      text: '股东2',
      type: 'relation-node',
      mainColor: 'blue',
      arrow: 'out',
      children: [
        {
          text: 'A公司',
          type: 'entity-node',
          mainColor: 'blue',
          hasPoint: true,
          subText: '[40%]',
          children: [
            {
              text: '对外投资3',
              type: 'relation-node',
              mainColor: 'red',
              arrow: 'in',
            },
            {
              text: '对外投资4',
              type: 'relation-node',
              mainColor: 'red',
              arrow: 'out',
            },
          ],
        },
        {
          text: 'B公司',
          type: 'entity-node',
          mainColor: 'blue',
          hasPoint: true,
          subText: '[40%]',
        },
        {
          text: '展开',
          type: 'more-node',
          subText: '[1]',
          hiddenChildren: [
            {
              text: 'C公司',
              type: 'entity-node',
              mainColor: 'blue',
              hasPoint: true,
              subText: '[40%]',
            },
          ],
        },
      ],
    },
  ],
}
</script>
      ` }}
    </template>
  </code-demo>

  <h3>Attributes</h3>
  <table-info type="props" :data="propsTable"></table-info>

  <h3>Data Option</h3>
  <p>
    data是一个对象，表示根节点，它的children表示下面的子节点。data中的节点需要指明type，表示节点类型，不同的节点类型有不同的显示效果与交互。以下对不同的节点类型的属性进行说明：
  </p>
  <h4>root-node</h4>
  <table-info type="param" :data="rootNodeParamTable"></table-info>
  <h4>relation-node</h4>
  <table-info type="param" :data="relationNodeParamTable"></table-info>
  <h4>enitty-node</h4>
  <table-info type="param" :data="entityNodeParamTable"></table-info>
  <h4>more-node</h4>
  <table-info type="param" :data="moreNodeParamTable"></table-info>

  <h3>Events</h3>
  <table-info type="event" :data="eventTable"></table-info>
  <h3>Exposes</h3>
  <table-info type="expose" :data="exposeTable"></table-info>
</template>

<script setup>
import {
  clickNode,
  clickToolbar,
  htmlCode,
  scriptCode,
  propsTable,
  rootNodeParamTable,
  relationNodeParamTable,
  entityNodeParamTable,
  moreNodeParamTable,
  exposeTable,
  eventTable,
} from './config'
import data from './relation-data'

const waterMarker = {
  url: '/健身房.png',
  width: 100,
  height: 100,
}
</script>
